<template>
	<view>
		<view id="container-top" class="column align-items-center"
			style="background-color: #2EA4FB;padding: 30rpx 35rpx;padding-bottom: 50rpx;">
			<image  :src="userInfo.wxHeadimgurl||'/static/user-my.jpg'"  style="width: 220rpx;height: 220rpx;border-radius: 50%;" mode=""></image>
			<view class="row align-items-center" style="margin-top: 30rpx;">
				<view class=""
					style="background-color: #94EA82;border-radius: 35rpx;width: 50rpx;text-align: center;padding: 5rpx;">
					<zywork-icon type="icon-xingxing" color="#ffffff" size="20"></zywork-icon>
				</view>
				<text style="margin-left: 20rpx;color: #FFFFFF;">{{userDetail.userLevelName}}</text>
			</view>
			<view class="row align-items-center" style="margin-top: 30rpx;">
				<ai-progress style="width:650rpx;" bgColor="#ffff00" :percentage="percentage" strokeWidth="10" :noData="true"
					inBgColor="#7EAFCF"></ai-progress>
			</view>
			<view class="row" style="align-items: center;margin-top: 30rpx;flex: 1;width: 96%;">
				<view class="row" style="margin-right: auto;">
					<text style="color: #FFFFFF;">正能量</text>
					<text style="color: #FFFFFF;margin-left: 20rpx;">{{userDetail.userLevelValue}}/{{userDetail.empiricalValue}}</text>
				</view>
				<view class="row" style="margin-left: auto;align-items: center;" @click="navTo('/pages/index/daily-Quest/daily-Quest')">
					<text style="color: #FBF10C;margin-right: 10rpx;">去升级</text>
					<zywork-icon type="icon-shuangjiantou" color="#FBF10C" size="30"></zywork-icon>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="row" id="container-top1" style="align-items: center;padding: 30rpx 60rpx;border-bottom: solid 1rpx #eee;">
				<text style="font-size: 36rpx;">已升级{{userDetail.userLevel}}项</text>
				<text style="color: #B2B2B2;margin-left: auto;font-size: 30rpx;">未升级{{gradeRuleList.length - userDetail.userLevel}}项</text>
			</view>
			<scroll-view scroll-y="true" :style="`height: ${windowHeight}px;`">
				<view class="row" style="padding: 0rpx 60rpx;flex-wrap: wrap;">
					<grades-item v-for="(item,index) in gradeRuleList" :key="index" :isGrades="item.isGrades" :gradesNumber="item.gradesNumber" :title="item.name" :imgUrl="'/static/my-user/grades'+(index+1)+'.png'"></grades-item>
					<!-- <grades-item title="环保学徒" imgUrl="/static/my-user/grades2.png"></grades-item>
					<grades-item title="环保新秀" imgUrl="/static/my-user/grades3.png"></grades-item>
					<grades-item title="环保卫士" imgUrl="/static/my-user/grades4.png"></grades-item>
					<grades-item title="环保先锋" imgUrl="/static/my-user/grades5.png"></grades-item>
					<grades-item title="环保达人" imgUrl="/static/my-user/grades6.png"></grades-item>
					<grades-item title="环保专家" imgUrl="/static/my-user/grades7.png"></grades-item>
					<grades-item title="环保大使" imgUrl="/static/my-user/grades8.png"></grades-item>
					<grades-item title="环保守护神" imgUrl="/static/my-user/grades8.png"></grades-item> -->
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	
	import gradesItem from '@/components/grades-item/grades-item.vue'
	
	export default {
		components: {
			gradesItem
		},
		data() {
			return {
				percentage:0,
				windowHeight:0,
				userInfo:"",
				userDetail:"",
				gradeRuleList:[]
			};
		},
		created() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			setTimeout(() => {
				 this.$nextTick(() => {
					 let query = uni.createSelectorQuery().in(this);
					 query.select('#container-top').boundingClientRect();  
					 query.exec(data => {  
						this.windowHeight -= data[0].height
					 });
					 
					 setTimeout(()=>{
						 let query1 = uni.createSelectorQuery().in(this);
						 query1.select('#container-top1').boundingClientRect();  
						 query1.exec(data => {  
								this.windowHeight -= data[0].height
						 });
					 })
				 })
			}, 100)
		},
		onShow() {
			this.userInfo = uni.getStorageSync(this.$util.USER_INFO)
			this.getGradeRuleList()
		},
		methods:{
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			getGradeRuleList(){
				console.log("获取等级规则信息")
				this.$util.doGet('/level/list', {
					pageNum:1,
					pageSize:50
				}, {}, true).then(res => {
					console.log(res)
					if(res.data.code == this.$ResponseStatus.OK){
						this.gradeRuleList = res.data.data.list
						this.getGrades();
					}
				}).catch(error => {
					console.log(error)
				})
			},
			getGrades(){
				console.log("获取个人等级信息")
				this.$util.doGet('/userLevel/getUserDetail', {}, {}, true).then(res1 => {
					if(res1.data.code == this.$ResponseStatus.OK){
						this.userDetail = res1.data.data
						this.userDetail.userLevel = parseInt(this.userDetail.userLevel)
						let length = this.gradeRuleList.length-1
						console.log(this.gradeRuleList[length].value)
						if(this.userDetail.userLevelValue >= this.gradeRuleList[length].value){
							this.gradeRuleList[length].isGrades = true
							this.userDetail.empiricalValue = this.gradeRuleList[length].value
							this.percentage =100
							this.gradeRuleList[length].gradesNumber =3
							return
						}
						this.gradeRuleList.forEach((item,index) =>{
							if(item.level == this.userDetail.userLevel+1){
								this.gradeRuleList[index-1].isGrades = true
								this.userDetail.empiricalValue = item.value
								let difference = this.gradeRuleList[index].value - this.gradeRuleList[index-1].value //得出3级与2级相差多少经验
								let userLevelValue = this.userDetail.userLevelValue - this.gradeRuleList[index-1].value //第二级这个等级下获取了多少经验
								let gradesNumber = (100/difference*userLevelValue).toFixed(1)
								if(gradesNumber<=33.3){//表示此等级1颗星
									this.gradeRuleList[index-1].gradesNumber =1
								}else if (gradesNumber>33.3&&gradesNumber<=66.6){
									//表示此等级2颗星
									this.gradeRuleList[index-1].gradesNumber =2
								}else if (gradesNumber>66.6){
									//表示此等级2颗星
									this.gradeRuleList[index-1].gradesNumber =3
								}
								if(this.userDetail.empiricalValue){
									this.percentage = (100/this.userDetail.empiricalValue*this.userDetail.userLevelValue).toFixed(1)
									console.log(this.percentage)
								}
							}
						})
					}
				}).catch(error => {
					console.log(error)
				})
			},
		},
		onNavigationBarButtonTap(e) {
			console.log("帮助")
		}
	}
</script>

<style lang="scss">
	.column {}

	.container {
		position: relative;
		top: -20rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.active{
			background-color: rgba($color: #000000, $alpha: 0.1);
		}

		.grades-item {
			width: 210rpx;
			align-items: center;
			justify-content: flex-start;
			.grades {
				width: 150rpx;
				height: 150rpx;
				border: solid 1rpx #dddddd;
				border-radius: 50%;
			}
		}


	}
</style>
